import React from 'react';
import { Form, Input, Spin } from 'antd';
import { FeatureInfoProps } from '../types';
import styles from './index.less';

const FeatureInfo: React.FC<FeatureInfoProps> = ({ 
  featureInfo, 
  loading 
}) => {
  return (
    <div className={styles['form-section']}>
      <div className={styles['section-header']}>
        <div className={styles['section-title']}>特性信息</div>
        <div className={styles['section-icon']}>▼</div>
      </div>
      
      <div className={styles['section-content']}>
        <Spin spinning={loading}>
          <Form layout="vertical">
            <div className={styles['form-row']}>
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>特性名称</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={featureInfo.featureName} 
                    readOnly 
                  />
                </div>
              </div>
              
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>特性编号</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={featureInfo.featureCode} 
                    readOnly 
                  />
                </div>
              </div>
            </div>
            
            <div className={styles['form-row']}>
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>所属专题</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={featureInfo.projectName} 
                    readOnly 
                  />
                </div>
              </div>
              
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>所属专题编号</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={featureInfo.projectCode} 
                    readOnly 
                  />
                </div>
              </div>
            </div>
            
            <div className={styles['form-row']}>
              <div className={styles['form-item']}>
                <div className={styles['form-label']}>特性负责人</div>
                <div className={styles['form-field']}>
                  <Input 
                    className={styles['form-control']} 
                    value={featureInfo.featureOwner} 
                    readOnly 
                  />
                </div>
              </div>
            </div>
          </Form>
        </Spin>
      </div>
    </div>
  );
};

export default FeatureInfo; 